import React from "react";
import * as echarts from 'echarts';

class ViewGauge extends React.Component {
    //react加载顺序：constructor()构造函数-----render()-----componentDidMount()---自定义方法（必须被调用）
    //render()执行完再执行的钩子函数

    componentDidMount = () => {
        this.myecharts = echarts.init(document.getElementById('echartsGauge'))
    }
    //自定义方法，显示仪表盘图形
    showGauge = (dataGauge) => {
        let option = {
            title: {
                text: `MP2.5`,
                textStyle: {
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '75%'],
                    radius: '100%',
                    min: 0,
                    max: 1,
                    splitNumber: 8,
                    axisLine: {
                        lineStyle: {
                            width: 6,
                            color: [
                                [0.25, '#7CFFB2'],
                                [0.5, '#58D9F9'],
                                [0.75, '#FDDD60'],
                                [1, '#FF6E76']
                            ]
                        }
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '12%',
                        width: 20,
                        offsetCenter: [0, '-60%'],
                        itemStyle: {
                            color: 'inherit'
                        }
                    },
                    axisTick: {
                        length: 12,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: 'auto',
                            width: 5
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 20,
                        distance: -60,
                        rotate: 'tangential',
                        formatter: function (value) {
                            if (value === 0.875) {
                                return '严重';
                            } else if (value === 0.625) {
                                return '中度';
                            } else if (value === 0.375) {
                                return '良';
                            } else if (value === 0.125) {
                                return '优';
                            }
                            return '';
                        }
                    },
                    title: {
                        offsetCenter: [0, '-5%'],
                        fontSize: 20,
                        color: 'inherit'
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '-25%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            return Math.round(value * 100);
                        },
                        color: 'inherit'
                    },
                    data: [dataGauge]
                }
            ]
        }
        this.myecharts.setOption(option)
    }
    //新版本的：在参数、状态，值发生变化后触发的（有2个参数）
    shouldComponentUpdate = (nextProps, nextStata) => {
        this.showGauge(nextProps.dataGauge)
        return true
    }
    //旧版本的 （有一个参数的），不建议使用
    // componentWillReceiveProps = (nextProps) => {
    //     this.setState({
    //         data: nextProps.dataGauge
    //     }, () => {
    //         this.showGauge()
    //     })
    // }

    render() {
        return (
            <div>
                <div id="echartsGauge" className="temperature">PM2.5</div>
            </div>
        )
    }
}

export default ViewGauge